<template>
	<view v-if="loginDate">
		<!-- 顶部图片 -->
		<view class="back-img">
			<image class="fengrui" src="../../static/my/backimg.jpg"></image>
			<view class="back-radius"></view>
		</view>

		<!-- 个人信息 -->
		<view class="user-info">
			<view class="user-n-a">
				<view class="user-name">{{ userInfo.nickName }}</view>
				<view class="user-abstract">{{ abstract }}</view>
			</view>
			<view class="user-img">
				<image class="fengrui-img" :src="userInfo.avatarUrl"></image>
			</view>
		</view>

		<view class="container">
			<!-- 标题 -->
			<view class="title-h">
				随缘贡献
			</view>

			<!-- 随缘贡献 -->
			<view class="devote-w">
				<view class="devote-wk" v-for="(dev ,index) in devote" :key="index" @tap="devTap(index)">
					<view class="devote-img">
						<image class="fengrui-img" :src="dev.img"></image>
					</view>
					<view class="devote-t">{{ dev.title}}</view>
				</view>
			</view>

			<!-- 标题 -->
			<view class="title-h">
				随缘设置
			</view>

			<!-- 随缘贡献 -->
			<view class="devote-w">
				<!-- #ifdef MP-WEIXIN -->
				<button class="devote-wk" open-type="contact">
					<view class="devote-img">
						<image class="fengrui-img" src="../../static/my/customer.png"></image>
					</view>
					<view class="devote-t">联系客服</view>
				</button>
				<!-- #endif -->
				<view class="devote-wk">
					<view class="devote-img">
						<image class="fengrui-img" src="../../static/my/code.png"></image>
					</view>
					<view class="devote-t">扫码登陆</view>
				</view>
				<view class="devote-wk" @tap="Message()">
					<view class="devote-img">
						<image class="fengrui-img" src="../../static/my/Message.png"></image>
					</view>
					<view class="devote-t">留言反馈</view>
				</view>
				<view class="devote-wk" @click="cleanStorage">
					<view class="devote-img">
						<image class="fengrui-img" src="../../static/my/clear.png"></image>
					</view>
					<view class="devote-t">清理缓存</view>
				</view>
				<view class="devote-wk" @click="cleanStorage">
					<view class="devote-img">
						<image class="fengrui-img" src="../../static/my/exit.png"></image>
					</view>
					<view class="devote-t">退出登录</view>
				</view>
				<view class="devote-wk" @click="goContribution">
					<view class="devote-img">
						<image class="fengrui-img" src="../../static/my/exit.png"></image>
					</view>
					<view class="devote-t">文章投稿</view>
				</view>
			</view>
		</view>
	</view>

	<view v-else>
		<view class="login-w">
			<view class="login-img">
				<image class="feng-img" src="../../static/my/nologin.svg" mode=""></image>
			</view>
			<!-- 热评 写死的一句话 -->
			<view class="review">
				{{ hotreview }}
			</view>
			<view class="login-btn">
				<!-- <button class="login-btn-qu">取消</button> -->
				<button class="login-btn-lo" @click="login">登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				hotreview: '当你不在期待不在奢望的时候，或许一切都会如期而至！',
				loginDate: false,
				userInfo: '',
				abstract: "tips",
				userimg: "../../static/timg.jpg",
				devote: [{
						title: '浏览记录',
						img: '../../static/my/browse.png'
					},
					{
						title: '我的点赞',
						img: '../../static/my/praise.png'
					},
					{
						title: '我的评论',
						img: '../../static/index/square.png'
					}
				]
			}
		},
		onLoad() {
			this.getUserInfo();
		},
		methods: {
			devTap: function(e) {
				console.log(e)
				switch (e) {
					case 0:
						// 跳转添加浏览记录参数
						uni.navigateTo({
							url: "../data/records"
						})
						break;
					case 1:
						// 跳转添加我的点赞参数
						uni.navigateTo({
							url: "../searchlist/searchlist?type=1"
						})
						break;
					case 2:
						// 跳转添加我的评论参数
						uni.navigateTo({
							url: "../searchlist/searchlist?type=2"
						})
						break;
				}

			},
			//登录
			login: function() {
				const that = this;
				uni.showLoading({
					title: "正在登录",
					mask: true
				});
				let loginInfo = '';
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						loginInfo = loginRes;
					}
				});
				uni.getUserProfile({
					lang: "zh_CN",
					desc: "登录获取您的用户信息",
					success: function(userRes) {
						console.log(userRes)
						that.userInfo = userRes.userInfo;
						const userInfo = JSON.stringify(that.userInfo)
						// uni.setStorageSync('userInfos', userInfo);
						var postData = {
							"code": loginInfo.code,
							"userinfo": userInfo
						}
						// console.log(postData);
						// return;
						//传输信息
						app.request('/User/wxUserLogin', postData, 'POST',
							function(res) {
								if (res.data.code == 1) {
									// uni.setStorageSync('session_key', res.data.data.session_key)
									uni.setStorageSync('user_id', res.data.userid);
									app.globalData.token = res.data.token;
									that.loginDate = true;
								}
								console.log('成功');
								console.log(res);
							},
							function(res) {
								console.log('失败');
								console.log(res);
							},
							function(res) {
								console.log('完成');
								console.log(res);
							}
						);
					}
				});
			},
			//清理缓存
			cleanStorage() {
				uni.clearStorage();
				this.userInfo = "";
				this.loginDate = false;
			},
			// 留言反馈
			Message: function() {
				uni.navigateTo({
					url: "../message/message"
				})
			},
			//用户投稿
			goContribution: function() {
				var postData = {
					user_id: user_id,
					name: that.comment_name,
					phone: that.comment_phone,
					email: that.comment_email,
					message: that.comment_message,
				}
				// //传输信息
				app.request('/Message/setMessage', postData, 'POST',
					function(res) {
						if (res.data.code == 1) {
							uni.showToast({
								icon: "none",
								title: "提交留言成功，处理中"
							})
							that.comment_name = "";
							that.comment_phone = "";
							that.comment_email = "";
							that.comment_message = "";
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.msg
							})
						}
						console.log('成功');
						console.log(res);
					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
					}
				);
			},
			getUserInfo() {
				const that = this;
				let postData = {}
				// //传输信息
				app.request('/User/getUserInfo', postData, 'GET',
					function(res) {
						if (res.data.code == 1) {
							that.userInfo = res.data.data;
							that.loginDate = false;
							if(res.data.data.avatarUrl&&res.data.data.nickName){
								that.loginDate = true;
							}
						}
						console.log('成功');
						console.log(res);
					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
					}
				);
			},
		},

		// 分享小程序界面
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '小程序名字id',
				path: '/pages/index/index',
				imageUrl: ''
			}

		},

	}
</script>

<style>
	/* 热评 */
	.review {
		background-color: #f9f9f9;
		padding: 32rpx;
		margin: 60rpx;
		border-radius: 10rpx;
		color: #ADADAD;
		font-size: 24rpx;

	}

	/* 登陆框 */
	.login-btn-lo {
		background-color: #4FABFA;
		border-radius: 100rpx;
		height: 80rpx;
		width: 300rpx;
		line-height: 80rpx;
		color: #FFFFFF;
	}

	.login-btn-qu {
		background-color: #FD6D6D;
		border-radius: 100rpx;
		height: 80rpx;
		width: 300rpx;
		line-height: 80rpx;
		color: #FFFFFF;
	}

	.login-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0rpx 30rpx;
	}

	.feng-img {
		height: 100%;
		margin: auto;
		display: block;
	}

	.login-img {
		height: 400rpx;
		overflow: hidden;
	}

	.login-w {
		margin-top: 40%;

	}

	/* 随缘贡献 */
	.devote-wk {
		flex-shrink: 0;
		width: 25%;
		margin: 24rpx;
	}

	button {
		margin-left: unset;
		margin-right: unset;
		line-height: unset;
	}

	button::after {
		border: none;
		width: 25%;
		height: unset;
	}

	.devote-t {
		color: #ADADAD;
		font-size: 26rpx;
		text-align: center;
	}

	.devote-img {
		height: 80rpx;
		width: 80rpx;
		overflow: hidden;
		margin: auto;
	}

	.devote-w {
		margin: 32rpx 0rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background-color: #f9f9f9;
		border-radius: 20rpx;
		flex-wrap: wrap;
	}

	/* 个人信息 */
	.user-img {
		height: 170rpx;
		width: 170rpx;
		background-color: #FFFFFF;
		border-radius: 100rpx;
		overflow: hidden;
		box-shadow: #cecece 0px 7px 13px;
	}

	.user-abstract {
		font-size: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #ADADAD;
	}

	.user-name {
		font-size: 58rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.user-n-a {
		width: 60%;
		height: 190rpx;
		overflow: hidden;
	}

	.user-info {
		display: flex;
		margin: 0rpx 40rpx;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}


	/* 背景图片 */
	.back-radius {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 60rpx;
		width: 100%;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background: #FFFFFF;
		z-index: 2;
	}

	.back-img {
		height: 440rpx;
		overflow: hidden;
		position: relative;
	}

	.fengrui {
		height: 100%;
		width: 100%;
	}

	.container {
		padding: 40rpx;
	}

	.fengrui-img {
		height: 100%;
		width: 100%;
	}

	.title-h {
		font-size: 32rpx;
		margin-top: 30rpx;
	}
</style>
